<template>
    <div class="mine">
        <h2>Mine个人中心组件</h2>
        <section>
            <div class="left">
                <!-- 二级路由的切换一定是在一级路由的基础上继续切换的，要先把一级路由写出来，后面拼上对应的二级路由 -->
                <!-- 在二级路由下使用query和params传参 -->
                <router-link :to="{path:'/mine/info',query:{id:1,name:'ljh',price:223}}">个人信息</router-link>
                <button @click="goOrder">我的订单</button>
            </div>
            <div class="right">
                <router-view></router-view>
            </div>
        </section>
    </div>
</template>

<script>
    export default {
        name:"Mine",
        methods:{
            goOrder(){
                this.$router.push({name:'od',params:{id:2,name:'ljh',price:233}}).catch(()=>{});
            }
        }
    }
</script>

<style scoped>
    .mine{
        width: 100%;
        height: 70%;
    }
    .mine>h2{
        width: 100%;
        height: 15%;
        font-size: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(165, 142, 42);
    }
    .mine section{
        display: flex;
        width: 100%;
        height: 85%;
    }
    .left{
        width: 30%;
        height: 100%;
        background-color: rgb(0, 162, 255);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }
    .left a,.left button{
        font-size: 30px;
    }
    .right{
        width: 70%;
        height: 100%;
        background-color: rgb(217, 255, 0);
    }
</style>